<!-- 回到顶部的按钮 -->
<template>
	<view class="mescroll-totop flex align-center justify-center"
		:class="[value ? 'mescroll-totop-in' : 'mescroll-totop-out']" @click="toTopClick">
		<text class="iconfont1 icon-huidaodingbu to-top-icon"></text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: true
			};
		},
		methods: {
			toTopClick() {
				this.$emit('toTop'); // 派发点击事件
			}
		}
	};
</script>

<style>
	/* 回到顶部的按钮 */
	.mescroll-totop {
		width: 90rpx;
		height: 90rpx;
		background: #FFFFFF;
		border: 1rpx solid #ECECEC;
		border-radius: 50%;
		z-index: 99;
		position: fixed !important;
		/* 加上important避免编译到H5,在多mescroll中定位失效 */
		right: 20rpx !important;
		bottom: 120rpx !important;
		border-radius: 50%;
		opacity: 0;
		transition: opacity 0.5s;
		/* 过渡 */
		margin-bottom: var(--window-bottom);
		/* css变量 */
	}

	.to-top-icon {
		font-size: 42rpx;
		color: #8A8A8A;
	}

	/* 适配 iPhoneX */
	.mescroll-safe-bottom {
		margin-bottom: calc(var(--window-bottom) + constant(safe-area-inset-bottom));
		/* window-bottom + 适配 iPhoneX */
		margin-bottom: calc(var(--window-bottom) + env(safe-area-inset-bottom));
	}

	/* 显示 -- 淡入 */
	.mescroll-totop-in {
		opacity: 1;
	}

	/* 隐藏 -- 淡出且不接收事件*/
	.mescroll-totop-out {
		opacity: 0;
		pointer-events: none;
	}
</style>
